<template>
  <div>
    <el-card>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
          >导出</el-button>
        </el-col>
        <el-col :span="6" :offset="15">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
          >
            <el-button
              style="padding-right:10px"
              slot="suffix"
              type="text"
            >搜索
            </el-button
            >
          </el-input>
        </el-col>
      </el-row>

      <el-table :data="informList" v-loading="loading" style="margin-top: 10px" height="498px">
        <el-table-column label="用户ID" align="center" prop="pid" width="90%" class="el-table-column-font"/>
        <el-table-column label="用户昵称" align="center" prop="title" />
        <el-table-column label="帖子ID" align="center" prop="authorId" />
        <el-table-column label="帖子标题" align="center" prop="authorName" />
        <el-table-column label="帖子分类" align="center" prop="categoryName"/>
        <el-table-column label="创建时间" align="center" prop="gmtCreated"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="goToPost(scope.row)"
            >查看</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-thumb"
                @click="setTop(scope.row)"
                v-if="scope.row.sort === 0"
              >置顶</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-thumb"
                @click="setTop(scope.row)"
                v-else
              >取消置顶</el-button>
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="text"-->
<!--              icon="el-icon-delete"-->
<!--              icon-color="red"-->
<!--              @click="deletePost(scope.row)"-->
<!--            >删除</el-button>-->
            <el-popover
              placement="right"
              width="130"
              trigger="click"
              >
              <a style="line-height: 50px">确定要删除吗</a>
              <el-row :gutter="20">
                <el-col :span="10"><el-button type="primary" size="small" @click="closePopover" round>不是</el-button></el-col>
                <el-col :span="1"><el-button type="danger" size="small" @click="deletePost(scope.row)" round>是的</el-button></el-col>
              </el-row>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-thumb"
                slot="reference"
              >删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="this.queryParams.total"
        :page-size="this.queryParams.pageSize"
        :current-page="this.queryParams.pageNum"
        @current-change="getRecords"
        style="margin-top: 50px;line-height: normal"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Header from '../../../components/header.vue'
import Aside from '../../../components/aside.vue'
export default {
  name: 'index',
  mounted () {
    this.getRecords(1)
  },
  components: {
    // eslint-disable-next-line no-unused-expressions
    Header,
    Aside
  },
  data () {
    return {
      visible1: false,
      loading: false,
      total: 10,
      informList: [],
      title: '',
      queryParams: {
        pageNum: 1,
        pageSize: 7,
        postCode: undefined,
        postName: undefined,
        status: undefined,
        total: 1,
        currentPage: 1
      },
      top: '置顶'
    }
  },
  methods: {
    getRecords (val) {
      this.loading = true
      this.queryParams.pageNum = val
      this.$axios.get('/admin/post/queryAll?currentPage=' + this.queryParams.pageNum).then(res => {
        this.informList = res.data.data
        this.queryParams.total = res.data.total
        console.log(this.informList)
      })
      this.loading = false
    },
    goToPost (row) {
      console.log(row.pid)
      this.$router.push({
        name: 'postBody',
        query: {
          pid: row.pid
        }
      })
    },
    setTop (row) {
      this.$axios.post('/admin/post/isTop', row).then(res => {
        // this.$router.go(0)
        this.getRecords()
      })
      this.$message({
        message: '操作成功',
        type: 'success'
      })
    },
    deletePost (row) {
      this.closePopover()
      this.$axios.get('/post/delete?uid=' + this.$store.getters.getUser.UID + '&pid=' + row.pid).then(res => {
        this.getRecords(this.queryParams.pageNum)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      })
    },
    closePopover () {
      document.body.click()
    }
  }
}

</script>
<style>
html, body, #app, .el-container {
  padding: 0;
  margin: 0;
  height: 100%;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #545C64;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-table-column-font{
  font-size: xx-large;
}
</style>
